import { reactive } from "vue";
import { deepMerge } from "../../utils";

import form, { type Form, type FormPropsType } from "./form";
import formItem, { type FormItem, type FormItemPropsType } from "./formItem";
import icon, { type Icon, type IconPropsType } from "./icon";
import checkboxGroup, {
	type CheckboxGroup,
	type CheckboxGroupPropsType,
} from "./checkboxGroup";
import checkbox, { type Checkbox, type CheckboxPropsType } from "./checkbox";
import numberBox, { type NumberBox, type NumberBoxPropsType } from "./numberBox";
import radioGroup, {
	type RadioGroup,
	type RadioGroupPropsType,
} from "./radioGroup";
import radio, { type Radio, type RadioPropsType } from "./radio";
import datetimePicker, { type DatetimePicker, type DatetimePickerPropsType } from "./datetimePicker";
import picker, { type Picker, type PickerPropsType } from "./picker";
import keyboard, { type Keyboard, type KeyboardPropsType } from "./keyboard";
import code, { type Code, type CodePropsType } from "./code";
import avatar, { type Avatar, type AvatarPropsType } from "./avatar";
import swiper, { type Swiper, type SwiperPropsType } from "./swiper";
import swiperIndicator, { type SwiperIndicator, type SwiperIndicatorPropsType } from "./swiperIndicator";
import actionSheet, { type ActionSheet, type ActionSheetPropsType } from "./actionSheet";
import gap, { type Gap, type GapPropsType } from "./gap";
import loadingIcon, { type LoadingIcon, type LoadingIconPropsType } from "./loadingIcon";
import loadingPage, { type LoadingPage, type LoadingPagePropsType } from "./loadingPage";
import text, { type Text, type TextPropsType } from "./text";
import navbar, { type Navbar, type NavbarPropsType } from "./navbar";
import tabs, { type Tabs, type TabsPropsType } from "./tabs";
import badge, { type Badge, type BadgePropsType } from "./badge";
import sticky, { type Sticky, type StickyPropsType } from "./sticky";
// import zIndex, { type ZIndex, ZIndexPropsType } from "./zIndex";
import lazyPicker, { type LazyPicker, type LazyPickerPropsType } from "./lazyPicker";
import textarea, { type Textarea, type TextareaPropsType } from "./textarea";
import input, { type Input, type InputPropsType } from "./input";
import button, { type Button, type ButtonPropsType } from "./button";
import calendarMonth, { type CalendarMonth, type CalendarMonthPropsType } from "./calendarMonth";
import calendar, { type Calendar, type CalendarPropsType } from "./calendar";
import cell, { type Cell, type CellPropsType } from "./cell";
import cellGroup, { type CellGroup, type CellGroupPropsType } from "./cellGroup";
import codeButton, { type CodeButton, type CodeButtonPropsType } from "./codeButton";
import codeInput, { type CodeInput, type CodeInputPropsType } from "./codeInput";
import countTo, { type CountTo, type CountToPropsType } from "./countTo";
import line, { type Line, type LinePropsType } from "./line";
import numberKeyboard, { type NumberKeyboard, type NumberKeyboardPropsType } from "./numberKeyboard";
import option, { type Option, type OptionPropsType } from "./option";
import overflowEllipsis, { type OverflowEllipsis, type OverflowEllipsisPropsType } from "./overflowEllipsis";
import overlay, { type Overlay, type OverlayPropsType } from "./overlay";
import popup, { type Popup, type PopupPropsType } from "./popup";
import select, { type Select, type SelectPropsType } from "./select";
import sliders, { type Sliders, type SlidersPropsType } from "./sliders";
import statusBar, { type StatusBar, type StatusBarPropsType } from "./statusBar";
import _switch, { type Switch, type SwitchPropsType } from "./switch";
import transition, { type Transition, type TransitionPropsType } from "./transition";
import cascader, { type Cascader, type CascaderPropsType } from "./cascader";
import search, { type Search, type SearchPropsType } from "./search";
import collapse, { type Collapse, type CollapsePropsType } from "./collapse";
import collapseItem, { type CollapseItem, type CollapseItemPropsType } from "./collapseItem";
import dragList, { type DragList, type DragListPropsType } from "./dragList";
import dragListItem, { type DragListItem, type DragListItemPropsType } from "./dragListItem";
import modal, { type Modal, type ModalPropsType } from "./modal";
import noticeBar, { type NoticeBar, type NoticeBarPropsType } from "./noticeBar";
import qrcode, { type Qrcode, type QrcodePropsType } from "./qrcode";
import dropdownMenu, { type DropdownMenu, type DropdownMenuPropsType } from "./dropdownMenu";
import dropdownMenuItem, { type DropdownMenuItem, type DropdownMenuItemPropsType } from "./dropdownMenuItem";
import tabbar, { type Tabbar, type TabbarPropsType } from "./tabbar";
import tabbarItem, { type TabbarItem, type TabbarItemPropsType } from "./tabbarItem";
import list, { type List, type ListPropsType } from "./list";
import listItem, { type ListItem, type ListItemPropsType } from "./listItem";
import skeleton, { type Skeleton, type SkeletonPropsType } from "./skeleton";
import skeletonItem, { type SkeletonItem, type SkeletonItemPropsType } from "./skeletonItem";
import album, { type Album, type AlbumPropsType } from "./album";
import countDown, { type CountDown, type CountDownPropsType } from "./countDown";
import swipeAction, { type SwipeAction, type SwipeActionPropsType } from "./swipeAction";
import swipeActionItem, { type SwipeActionItem, type SwipeActionItemPropsType } from "./swipeActionItem";
import row, { type Row, type RowPropsType } from "./row";
import col, { type Col, type ColPropsType } from "./col";
import parse, { type Parse, type ParsePropsType } from "./parse";
import scrollList, { type ScrollList, type ScrollListPropsType } from "./scrollList";
import scrollView, { type ScrollView, type ScrollViewPropsType } from "./scrollView";
import lineProgress, { type LineProgress, type LineProgressPropsType } from "./lineProgress";

type Props = {
	form: FormPropsType;
	formItem: FormItemPropsType;
	icon: IconPropsType;
	checkboxGroup: CheckboxGroupPropsType;
	checkbox: CheckboxPropsType;
	numberBox: NumberBoxPropsType;
	radioGroup: RadioGroupPropsType
	radio: RadioPropsType,
	datetimePicker: DatetimePickerPropsType,
	picker: PickerPropsType,
	keyboard: KeyboardPropsType
	code: CodePropsType,
	avatar: AvatarPropsType,
	swiper: SwiperPropsType,
	swiperIndicator: SwiperIndicatorPropsType,
	actionSheet: ActionSheetPropsType,
	gap: GapPropsType,
	loadingIcon: LoadingIconPropsType,
	loadingPage: LoadingPagePropsType,
	text: TextPropsType,
	navbar: NavbarPropsType,
	tabs: TabsPropsType,
	badge: BadgePropsType,
	sticky: StickyPropsType,
	// zIndex: ZIndexPropsType,
	lazyPicker: LazyPickerPropsType,
	textarea: TextareaPropsType,
	input: InputPropsType,
	button: ButtonPropsType,
	calendarMonth: CalendarMonthPropsType,
	calendar: CalendarPropsType,
	cell: CellPropsType,
	cellGroup: CellGroupPropsType,
	codeButton: CodeButtonPropsType,
	codeInput: CodeInputPropsType,
	countTo: CountToPropsType,
	line: LinePropsType,
	numberKeyboard: NumberKeyboardPropsType,
	option: OptionPropsType,
	overflowEllipsis:OverflowEllipsisPropsType,
	overlay:OverlayPropsType,
	popup:PopupPropsType,
	select:SelectPropsType,
	sliders:SlidersPropsType,
	statusBar:StatusBarPropsType,
	switch:SwitchPropsType,
	transition:TransitionPropsType,
	cascader:CascaderPropsType,
	search:SearchPropsType,
	collapse:CollapsePropsType,
	collapseItem:CollapseItemPropsType,
	dragList:DragListPropsType,
	dragListItem:DragListItemPropsType,
	modal:ModalPropsType,
	noticeBar:NoticeBarPropsType,
	qrcode:QrcodePropsType,
	dropdownMenu:DropdownMenuPropsType,
	dropdownMenuItem:DropdownMenuItemPropsType,
	tabbar:TabbarPropsType,
	tabbarItem:TabbarItemPropsType,
	list:ListPropsType,
	listItem:ListItemPropsType,
	skeleton:SkeletonPropsType,
	skeletonItem:SkeletonItemPropsType,
	album:AlbumPropsType,
	countDown:CountDownPropsType,
	swipeAction:SwipeActionPropsType,
	swipeActionItem:SwipeActionItemPropsType,
	row:RowPropsType,
	col:ColPropsType,
	parse:ParsePropsType,
	scrollList:ScrollListPropsType,
	scrollView:ScrollViewPropsType,
	lineProgress:LineProgressPropsType,
};

export type DefaultProps = {
	form: Form;
	formItem: FormItem;
	icon: Icon;
	checkboxGroup: CheckboxGroup;
	checkbox: Checkbox;
	numberBox: NumberBox;
	radioGroup: RadioGroup
	radio: Radio,
	datetimePicker: DatetimePicker,
	picker: Picker,
	keyboard: Keyboard
	code: Code,
	avatar: Avatar,
	swiper: Swiper,
	swiperIndicator: SwiperIndicator,
	actionSheet: ActionSheet,
	gap: Gap,
	loadingIcon: LoadingIcon,
	loadingPage: LoadingPage,
	text: Text,
	navbar: Navbar,
	tabs: Tabs,
	badge: Badge,
	sticky: Sticky,
	// zIndex: ZIndex,
	lazyPicker: LazyPicker,
	textarea: Textarea,
	input: Input,
	button: Button,
	calendarMonth: CalendarMonth
	calendar: Calendar,
	cell: Cell,
	cellGroup: CellGroup,
	codeButton: CodeButton,
	codeInput: CodeInput,
	countTo: CountTo,
	line: Line,
	numberKeyboard: NumberKeyboard,
	option: Option,
	overflowEllipsis:OverflowEllipsis,
	overlay:Overlay,
	popup:Popup,
	select:Select,
	sliders:Sliders,
	statusBar:StatusBar,
	switch:Switch,
	transition:Transition,
	cascader:Cascader,
	search:Search,
	collapse:Collapse,
	collapseItem:CollapseItem,
	dragList:DragList,
	dragListItem:DragListItem,
	modal:Modal,
	noticeBar:NoticeBar,
	qrcode:Qrcode,
	dropdownMenu:DropdownMenu
	dropdownMenuItem:DropdownMenuItem
	tabbar:Tabbar,
	tabbarItem:TabbarItem,
	list:List,
	listItem:ListItem,
	skeleton:Skeleton
	skeletonItem:SkeletonItem
	album:Album
	countDown:CountDown,
	swipeAction:SwipeAction,
	swipeActionItem:SwipeActionItem,
	row:Row,
	col:Col,
	parse:Parse,
	scrollList:ScrollList
	scrollView:ScrollView,
	lineProgress:LineProgress,
};

export type PropsKey = keyof Props;

let oldProps: Props = {
	form,
	formItem,
	icon,
	checkboxGroup,
	checkbox,
	numberBox,
	radioGroup,
	radio,
	datetimePicker,
	picker,
	keyboard,
	code,
	avatar,
	swiper,
	swiperIndicator,
	actionSheet,
	gap,
	loadingIcon,
	loadingPage,
	text,
	navbar,
	tabs,
	badge,
	sticky,
	// zIndex,
	lazyPicker,
	textarea,
	input,
	button,
	calendarMonth,
	calendar,
	cell,
	cellGroup,
	codeButton,
	codeInput,
	countTo,
	line,
	numberKeyboard,
	option,
	overflowEllipsis,
	overlay,
	popup,
	select,
	sliders,
	statusBar,
	switch:_switch,
	transition,
	cascader,
	search,
	collapse,
	collapseItem,
	dragList,
	dragListItem,
	modal,
	noticeBar,
	qrcode,
	dropdownMenu,
	dropdownMenuItem,
	tabbar,
	tabbarItem,
	list,
	listItem,
	skeleton,
	skeletonItem,
	album,
	countDown,
	swipeAction,
	swipeActionItem,
	row,
	col,
	parse,
	scrollList,
	scrollView,
	lineProgress
};

const props = reactive<Props>(oldProps);

export const setDefaultProps = (defaultProps: DefaultProps) => {
	oldProps = deepMerge(oldProps, defaultProps) as Props;
	Object.keys(oldProps).forEach((key) => {
		(props as Record<PropsKey, any>)[key as PropsKey] =
			oldProps[key as PropsKey];
	});
};

export const setComponentsProps = (_props: DefaultProps) => {
	const newProps = deepMerge(oldProps, _props) as Props
	Object.keys(oldProps).forEach((key) => {
		(props as Record<PropsKey, any>)[key as PropsKey] =
			newProps[key as PropsKey];
	});
};

export const resetProps = (key: PropsKey) => {
	deepMerge(props, {
		[key]: oldProps[key],
	});
};

export default props;
